<template>
  <div>文本大小自动调整hooks</div>
  <div class="mx-auto mt-6 border box-size" :style="style">
    <div v-for="(item, index) in wraplyric" :key="index">{{ item }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { computed, StyleValue } from "vue";

function useIsTextWrap(text: string, style: StyleValue) {
  const tmpDiv = document.createElement("div");
  Object.keys(style).forEach((key) => {
    tmpDiv.style[key] = style[key];
  });
  tmpDiv.style.position = "fixed";
  tmpDiv.style.left = "0px";
  tmpDiv.style.top = "999999px";
  tmpDiv.style.boxSizing = "box-size";
  tmpDiv.style.visibility = "hidden";
  document.body.appendChild(tmpDiv);
  let prevClientHeight;
  for (let i = 0; i < text.length; i++) {
    tmpDiv.textContent += text[i];
    const clientHeight = tmpDiv.clientHeight;
    if (prevClientHeight != void 0 && clientHeight > prevClientHeight) {
      tmpDiv.remove();
      return true;
    }
    prevClientHeight = clientHeight;
  }
  tmpDiv.remove();
  return false;
}

function useAutoOneLineFontSize(wraplyric: string[], style: any) {
  while (true) {
    let flags = false;
    for (let i = 0; i < wraplyric.length; i++) {
      const isWrap = useIsTextWrap(wraplyric[i], style);
      console.log(`${wraplyric[i]},isWrap:${isWrap}`);
      if (isWrap) {
        flags = true;
        let fontSize = parseInt(style.fontSize);
        style.fontSize = --fontSize + "px";
        break;
      }
    }
    if (!flags) {
      break;
    }
  }
}

const lyric = `奇异的大改变大改变大改变
我生命有何等
自耶稣来住在我心
我久慕的亮光
照耀我灵里面
自耶稣来住在我心
自耶稣来住在我心
自耶稣来住在我心
喜乐潮溢我魂
如海涛之滚滚
自耶稣来住在我心
我不再如迷途
愿与主常亲近
自耶稣来住在我心
我的罪虽众多
主宝血已洗净
自耶稣来住在我心
自耶稣来住在我心
自耶稣来住在我心
喜乐潮溢我魂
如海涛之滚滚
自耶稣来住在我心
我今有大盼望
又确实又稳固
自耶稣来住在我心
无疑云与凄雾
来遮蔽我道路
自耶稣来住在我心
自耶稣来住在我心
自耶稣来住在我心
喜乐潮溢我魂
如海涛之滚滚
自耶稣来住在我心
虽经过死荫谷
亦有光来照我
自耶稣来住在我心
我因信能望见
那美丽的城廓
自耶稣来住在我心
自耶稣来住在我心
自耶稣来住在我心
喜乐潮溢我魂
如海涛之滚滚
自耶稣来住在我心
阿们`;

const style = reactive({
  fontSize: "48px",
  textAlign: "center",
  fontWeight: "600",
  width: "300px",
  borderWidth: "1px",
}) as any;

const wraplyric = computed(() => {
  return lyric.split("\n").slice(0, 1);
});

while (true) {
  let flags = false;
  for (let i = 0; i < wraplyric.value.length; i++) {
    const isWrap = useIsTextWrap(wraplyric.value[i], style);
    console.log(`${wraplyric.value[i]},isWrap:${isWrap}`);
    if (isWrap) {
      flags = true;
      let fontSize = parseInt(style.fontSize);
      style.fontSize = --fontSize + "px";
      break;
    }
  }
  if (!flags) {
    break;
  }
}
</script>
<style scoped lang="less"></style>
